<template>
	<view>
		<view class="search-block" style="z-index: 1000;">
		    <view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo2'></text>
					<input type='text' :value='keyword' 
					:focus="focus" placeholder='请输入地址搜索' 
					placeholder-class='placeholder'  @input="searchAddress"
					maxlength="20"></input>
				</view>
			</view>
		</view>
		<view v-if="op=='shouye'&&locCity&&locCity.name" class="search-block">
			<view   class="search-item display-flex display-flex-align-center" @click="selectAddressLoc(locCity)">
				<image src="https://qiniu.gybsky.cn/other%2Ff70a13ea703a189576ac6c7c7f7d8c4c.png" style="width:20px;height:20px;margin-right:6px"></image>
				<view class="search-info">
					<view class="display-flex display-flex-justify-space-between">
						<view><text>（当前位置）{{locCity.city?locCity.city:'未知位置'}}</text></view>
					</view>
					<view class="search-detail line-ellipsis">  {{locCity.name?locCity.name:'未知'}}</view>
					
				</view>
			</view>
		</view>
		<view v-if="keyword&&resultList.length" class="search-block">
			<view  v-for="(item,index) in resultList" :key="index" class="search-item display-flex display-flex-align-center" @click="selectAddress(item)">
				<image src="../../../static/images/bus/location.png" style="width:20px;height:20px;margin-right:6px"></image>
				<view class="search-info">
					<view class="display-flex display-flex-justify-space-between">
						<view><text>{{item.name}}</text></view>
					</view>
					<view class="search-detail line-ellipsis">{{item.district}}</view>
					
				</view>
			</view>
		</view>
		<view v-else-if="keyword&&!resultList.length"  style="z-index: -1000;">
			<emptyPage title="请换个关键词试试吧"></emptyPage>
		</view>
		<view v-else  style="z-index: -1000;">
			<emptyPage title="输入关键词搜索"></emptyPage>
		</view>
	</view>	
</template>

<script>
	import {
		searchAddress
	} from '@/api/api.js';
	import {Debounce} from '@/utils/validate.js'
	import emptyPage from '@/components/emptyPage.vue'
	import Cache from '../../../utils/cache';
	import { CITY_INFO, FROM_ADDRESS ,TO_ADDRESS, LOCATION_CITY_INFO} from '../../../config/cache.js'
	export default {
		components: { emptyPage },
		data() {
			return {
				focus: true,
				keyword:'',
				resultList:[],
				type: 1,
				op: '',
				locCity: ''
			}
		},
		onLoad(option) {
			this.type = option.type
			this.op = option.op
   
            this.locCity = Cache.has(LOCATION_CITY_INFO)?Cache.get(LOCATION_CITY_INFO):''
			
			
			// if(this.op=='baoche'){
			// 	if(this.type==1){
			// 		uni.setNavigationBarTitle({
			// 			title:"您在哪里？"
			// 		})
			// 	 } 
			// 	if(this.type==2){
			// 		uni.setNavigationBarTitle({
			// 			title:"您想去哪儿？"
			// 		})
			// 	 }
			// }
			if(this.type==1){
				uni.setNavigationBarTitle({
					title:"您在哪里？"
				})
			 } 
			if(this.type==2){
				uni.setNavigationBarTitle({
					title:"您想去哪儿？"
				})
			 }
		},
		methods:{
			searchAddress: Debounce(function(e){
				var that = this
						
				this.$set(this, 'keyword', e.detail.value);
				
				uni.showLoading({
					title: '请稍后...'
				})
				var cityName = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)).name : ''
				let param = {
					keyword: this.keyword,
					city: cityName,
				}
				searchAddress(param).then(res => {
					console.log('resultList', res)
					uni.hideLoading()
					that.resultList = res.data
					
				}).catch(err => {
					uni.hideLoading()
				})
				
			}, 1000),
			
		
		  selectAddressLoc(item){
			  
			  if(this.op=='shouye'){
			  	if(this.type==1){
					Cache.set(FROM_ADDRESS,{
			  		 	name: item.name,
			  			lat: item.lat,
			  			lng: item.lng
			  		 })
			  		 
			  		 uni.switchTab({
			  		 	url: '/pages/index/index'
			  		 })
			  	 } 
			  	if(this.type==2){
			  		 
					 Cache.set(TO_ADDRESS,{
					  	name: item.name,
					 	lat: item.lat,
					 	lng: item.lng,
						district: item.district
					  })
					  console.log(454,item)
					  
					 var from_address  = Cache.has(FROM_ADDRESS)? JSON.parse(Cache.get(FROM_ADDRESS)):''
			  		 var to_address =  Cache.has(TO_ADDRESS)? JSON.parse(Cache.get(TO_ADDRESS)):''
					 // uni.redirectTo({
					 // 	url: "/pages/bus/search_result/index?from_lng="+from_address.lng+'&from_lat='
						// +from_address.lat+"&to_lng="+to_address.lng+"&to_lat="+to_address.lat
					 // })
					 
					uni.redirectTo({
						url: "/pages/bus/search_bus_result/index?from_lng="+from_address.lng+'&from_lat='
											+from_address.lat+"&to_lng="+to_address.lng+"&to_lat="+to_address.lat+"&name="+to_address.name+"&addr="+to_address.district
					})
					
			  	 }
			  	
			  	 
			  }
			  
			  if(this.op=='bus_index'){
			  	if(this.type==1){
			  		 Cache.set(FROM_ADDRESS,{
			  		  	name: item.name,
			  		 	lat: item.lat,
			  		 	lng: item.lng
			  		  })
			  		  
			  		 uni.redirectTo({
			  		 	url: '/pages/bus/index/index'
			  		 })
			  	 } 
			  	if(this.type==2){
			  		 Cache.set(TO_ADDRESS,{
			  		  	name: item.name,
			  		 	lat: item.lat,
			  		 	lng: item.lng
			  		  })
			  		  
			  		 var from_address  = Cache.has(FROM_ADDRESS)? JSON.parse(Cache.get(FROM_ADDRESS)):''
			  		 var to_address =  Cache.has(TO_ADDRESS)? JSON.parse(Cache.get(TO_ADDRESS)):''
					 uni.redirectTo({
						url: "/pages/bus/search_result/index?from_lng="+from_address.lng+'&from_lat='
						+from_address.lat+"&to_lng="+to_address.lng+"&to_lat="+to_address.lat
					 })
			  					
			  	 }
			  	
			  	 
			  }
			  
			  
			  if(this.op=='baoche'){
			  	if(this.type==1){
				
			  		uni.setStorage({ key: 'start_baoche', data: item});
			  	 } 
			  	if(this.type==2){
					
			  		 uni.setStorage({ key: 'end_baoche', data: item});
			  	 }
			  	
				uni.redirectTo({
					url: "/pages/bus/baoche/index"
				})
			  }
			  
			  if(this.op=='dingzhi'){
			  	if(this.type==1){
			  		uni.setStorage({ key: 'start_position', data: item});
			  	 } 
			  	if(this.type==2){
			  		 uni.setStorage({ key: 'end_position', data: item});
			  	 }
			  	uni.redirectTo({
			  		url: "/pages/bus/ogz_line/index"
			  	})
 
			  }
		  },
		  selectAddress(item){
			if(this.op=='shouye'){
				if(this.type==1){
					Cache.set(FROM_ADDRESS,{
					 	name: item.name,
						lat: item.lat,
						lng: item.lng
					 })
					 
					 uni.switchTab({
					 	url: '/pages/index/index'
					 })
				 } 
				if(this.type==2){
					Cache.set(TO_ADDRESS,{
					 	name: item.name,
						lat: item.lat,
						lng: item.lng,
						district: item.district
					 })
					  var from_address  = Cache.has(FROM_ADDRESS)? JSON.parse(Cache.get(FROM_ADDRESS)):''
					  var to_address =  Cache.has(TO_ADDRESS)? JSON.parse(Cache.get(TO_ADDRESS)):''
					  
					 // uni.redirectTo({
						// 	url: "/pages/bus/search_result/index?from_lng="+from_address.lng+'&from_lat='
						// 	+from_address.lat+"&to_lng="+to_address.lng+"&to_lat="+to_address.lat
						//  })
						
						uni.redirectTo({
							url: "/pages/bus/search_bus_result/index?from_lng="+from_address.lng+'&from_lat='
												+from_address.lat+"&to_lng="+to_address.lng+"&to_lat="+to_address.lat+"&name="+to_address.name+"&addr="+to_address.district
						})
								
				 }
				
				 
			}
			if(this.op=='bus_index'){
				if(this.type==1){
					 Cache.set(FROM_ADDRESS,{
					  	name: item.name,
					 	lat: item.lat,
					 	lng: item.lng
					  })
					  
					 uni.redirectTo({
					 	url: '/pages/bus/index/index'
					 })
				 } 
				if(this.type==2){
					Cache.set(TO_ADDRESS,{
					 	name: item.name,
						lat: item.lat,
						lng: item.lng
					 })
					 
					 var from_address  = Cache.has(FROM_ADDRESS)? JSON.parse(Cache.get(FROM_ADDRESS)):''
					 var to_address =  Cache.has(TO_ADDRESS)? JSON.parse(Cache.get(TO_ADDRESS)):''
					 
					 uni.redirectTo({
						url: "/pages/bus/search_result/index?from_lng="+from_address.lng+'&from_lat='
						+from_address.lat+"&to_lng="+to_address.lng+"&to_lat="+to_address.lat
					 })
								
				 }
				
				 
			}
			
			if(this.op=='baoche'){
				if(this.type==1){
					uni.setStorage({ key: 'start_baoche', data: item});
				 } 
				if(this.type==2){
					 uni.setStorage({ key: 'end_baoche', data: item});
				 }
				
				uni.redirectTo({
					url: "/pages/bus/baoche/index"
				})
			}
			
			if(this.op=='dingzhi'){
				if(this.type==1){
					uni.setStorage({ key: 'start_position', data: item});
				 } 
				if(this.type==2){
					 uni.setStorage({ key: 'end_position', data: item});
				 }
				uni.redirectTo({
					url: "/pages/bus/ogz_line/index"
				})
			 
			}
	
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.search-block{
		background-color: #ffffff;
		padding: 14upx 25upx;
	}
	.search-block .search {
		padding-left: 30rpx;
	}
	
	.search-block .search {
		margin-top: 20rpx;
	}
	
	.search-block .search .input {
		// width: 598rpx;
		width: 95%;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}
	
	.search-block .search .input input {
		width: 472rpx;
		font-size: 28rpx;
		background-color: #f7f7f7;
	}
	
	.search-block .search .input .placeholder {
		color: #999;
	}
	
	.search-block .search .input .iconfont {
		color: #555;
		font-size: 35rpx;
	}
	
	.search-block .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}
	
	.search-block .title {
		font-size: 28rpx;
		color: #999;
		margin: 30rpx 30rpx 25rpx 30rpx;
	}
	
	.search-block .title .iconfont {
		font-size: 28rpx;
	}
	
	.searchGood .list {
		padding-left: 10rpx;
	}
	
	.search-block .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 3rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 0 20rpx 20rpx;
	}
	
	.search-block .list .item.history-item {
		height: 50rpx;
		border: none;
		border-radius: 25rpx;
		background-color: #F7F7F7;
		line-height: 50rpx;
	}
	
	.search-block .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}
	.search-item{
		padding: 16upx 0 20upx 10upx;
	}
	.search-info{
		flex:1
	}
	.search-detail{
		width: 560upx;
		margin-top: 4upx;
		font-size: 25upx;
		color: #8F8F94;
	}
	.search-empty{
		position: absolute;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>